<template>
     <div class="container">
    <div class="login-page set-page">
        <h2 class="h2">
            请输入手机验证码
        </h2>
        <van-form @submit="onSubmit" validate-trigger="onSubmit" ref="userForm" :show-error="false" >
            <van-cell-group>
                <van-field left-icon="column" type="number" v-model.trim="userForm.code" name="code"
                    placeholder="请输入手机验证码" :rules="[{ validator: usernameValidator }]" />

            </van-cell-group>
            <div class="loginIn" >
                <van-button class="loginIn-btn"  block type="primary" native-type="submit">
                    确定
                </van-button>

            </div>
           
        </van-form>

    </div>
    </div>
</template>

<script>
import path from '../api/network.js'
import { Toast } from 'vant';
export default {
    data() {
        return {
            userForm: {
                code: '',
            },
            username: this.$route.query.username,
        }
    },
    methods: {

        usernameValidator(val) {
            return new Promise((resolve, reject) => {
                if (val === '') {
                    Toast('验证码不能为空')
                    return resolve(false)
                } else if (val.length > 4 || val.length < 4) {
                    Toast('验证码位数不正确！')
                }
                 else {
                    return resolve(true)
                }
            })
        },



        onSubmit(values) {
            if (values) {
              this.verify()
            } else {
              console.log('error submit!!');
              return false;
            }
        },

    verify() {
      path.verify({
        phoneNumber: this.username,
        vcode: this.userForm.code
      }
      ).then(res => {
        if (res.status == 200) {
           this.$router.push({ name: 'setpas'})
        }
      })
    },

    }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>



</style>